import React, { useEffect, useState } from 'react';



export default function SwitchUrl() {
    // 改用useState管理shouldSwitch, 因为下面这种方式并没有完全生效
    // let shouldSwitch = true; 
    const [shouldSwitch, setShouldSwitch] = useState(true);
    const [serverUrl, setServerUrl] = useState('localhost:1234');

    // useEffect, 第二个参数不传，每次组件更新时执行
    useEffect( () => {
        // console.log('不传 -> 第二个参数，每次组件更新时执行 useEffect');
    });

    // useEffect, 第二个参数为空数组，只在组件挂载和卸载时执行
    useEffect( () => {
        // console.log('空数组 -> 第二个参数，只在组件挂载和卸载时执行 useEffect');
        return (() => {
            console.log('clean up SwitchUrl.');
        });
    }, []);

    // useEffect, 第二个参数为某个状态，只在该状态变化时执行
    useEffect( () => {
        console.log('[serverUrl, shouldSwitch] -> 第二个参数，只在这两个状态变化时执行 useEffect方法, serverUrl: ', serverUrl, ', shouldSwitch: ', shouldSwitch);
    }
    , [serverUrl, shouldSwitch]);

    function handleClickChangeServerUrl() {
        console.log('shouldSwitch start: ', shouldSwitch, ', serverUrl ', serverUrl);
        shouldSwitch
        ? setServerUrl('https://api.github.com/repos') 
        : setServerUrl('https://api.github.com/users');
        setShouldSwitch(!shouldSwitch);
        // set之后，这里的shouldSwitch并没有立即更新，所以这里的shouldSwitch是上一次的值
        // console.log('shouldSwitch end: ', shouldSwitch, ', serverUrl ', serverUrl);
    }

    return (
        <div style={{border:'solid'}}>
            <ul>
                <h4>useEffect: </h4>
                <li>用于处理副作用,比如数据请求,DOM操作等.</li>
                <li>
                    <button onClick={handleClickChangeServerUrl}>Change ServerUrl</button>
                    : {serverUrl}
                </li>
            </ul>
        </div>
    );
}
